﻿<!DOCTYPE html>
<html>
<head>
    <title>{$platform.name}</title>
    <link href="/static/css/framework-font.css" rel="stylesheet"/>
    <script src="/static/js/jquery-2.1.1.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

    <script src="/static/js/jquery.cookie.js"></script>
    <link href="/static/css/framework-theme.css" rel="stylesheet"/>
    <script src="/static/js/framework-ui.js"></script>
    <script src="/static/js/framework-clientdata.js"></script>

    <!--弹框js-->
    <script src="/static/js/yii.js"></script>

    <!--引用layui弹框插件-->
    <script src="/static/layui/layui.all.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link href="/static/layui/css/layui.css" rel="stylesheet"/>
    <script src="/static/layui/lay/modules/layer.js"></script>


    <!--开关主键-->
    <script src="/static/bootstrap/bootstrap-switch.js"></script>
    <link href="/static/bootstrap/bootstrap-switch.css" rel="stylesheet"/>

    <!--    配置select多选相关-->
    <script src="/static/layui/dist/xm-select.js"></script>


    {if condition="$swidthStyle eq 0"}
    <link href="/static/css/pattern/public.css" rel="stylesheet"/>
    {else/}
    <link href="/static/css/default/public.css" rel="stylesheet"/>
    {/if}

    <script src="/static/bootstrap/js/echarts.min.js"></script>
</head>
<body>

<style>
    html, body {
        background-color: #fff !important;
    }

    .new_main {
        border-top: 1px solid #ccc
    }

    .batch {
        line-height: 35px;
    }

    .layui-table-body .layui-table-cell {
        height: 60px;
        line-height: 60px;
    }

    .top_title .top_desc {
        text-align: left;
        font-size: 16px;
        font-weight: 800;
        padding-left:25px;
    }

    .top_title .top_desc span {
        font-size: 28px;
        font-weight: 100;
    }
    site-demo-laydate{background-color:#fff;}
    .title{font-size:16px;padding-left:30px;padding:5px 25px;}
    .title span{border-left:2px solid #0b6fff;padding-left:15px;}
    .top_title{border:1px solid #d2d2d2;padding-bottom:8px;border-radius:6px;}
    .top_title .top_desc:nth-child(1) span{color:#24a5ff;}
    .top_title .top_desc:nth-child(2) span{color:#40c0cc;}
    .top_title .top_desc:nth-child(3) span{color:#ffa86e;}
    .top_title .top_desc:nth-child(4) span{color:#d258ff;}
    .top_title .top_desc:nth-child(5) span{color:#00e110;}
    .top_desc{width:19.5%}
    .top_desc1{width:8.333%;text-align: center}
    .zxd_top{margin-top:0px;margin-bottom:6px;}
    .zxd_top .top_desc span{font-size:18px;}
    .layui-laydate-footer{display: none!important;}


    .top_title .top_desc1:nth-child(1) span{color:#24a5ff;}
    .top_title .top_desc1:nth-child(2) span{color:#40c0cc;}
    .top_title .top_desc1:nth-child(3) span{color:#ffa86e;}
    .top_title .top_desc1:nth-child(4) span{color:#d258ff;}
    .top_title .top_desc1:nth-child(5) span{color:#00e110;}

    .show_content{margin-bottom:10px;display: inline-block;width:100%;}
</style>

<div class="newtest">

    <div class="layui-inline layui-col-md12 top_title zxd_top show_content">
        <div class="title"><span>月销售额</span></div>
       <div style="padding:5px 25px;">
           {volist name="top" id="vo" }
           <div class="layui-inline top_desc1">
               <span>{$vo.total}￥</span>
               <div>{$vo.month}月</div>
           </div>
           {/volist}
       </div>
    </div>

    <div class="site-demo-laydate show_content">
        <div class="layui-inline layui-col-md2" id="test-n1"></div>
        <div class="layui-inline layui-col-md10 top_title zxd_top">
            <div class="title">
                <span>当日收入明细</span>
            </div>

            <div>
                <div class="layui-inline top_desc">
                    <span class="general">{$general}￥</span>
                    <div>售票总收入</div>
                </div>
                <div class="layui-inline top_desc">
                    <span class="wechat">{$wechat}￥</span>
                    <div>微信收入</div>
                </div>
<!--                <div class="layui-inline top_desc">-->
<!--                    <span class="alipay">{$alipay}￥</span>-->
<!--                    <div>支付宝收入</div>-->
<!--                </div>-->
                <div class="layui-inline top_desc">
                    <span class="delivery">{$delivery}￥</span>
                    <div>现金收入</div>
                </div>
<!--                <div class="layui-inline top_desc">-->
<!--                    <span class="balance">{$balance}￥</span>-->
<!--                    <div>会员余额</div>-->
<!--                </div>-->
            </div>
        </div>

        <div class="layui-inline layui-col-md10 top_title zxd_top">
            <div class="title">
                <span>本周收入明细</span>
            </div>

            <div>
                <div class="layui-inline top_desc">
                    <span class="weegeneral">{$weegeneral}￥</span>
                    <div>售票总收入</div>
                </div>
                <div class="layui-inline top_desc">
                    <span class="weewechat">{$weewechat}￥</span>
                    <div>微信收入</div>
                </div>
<!--                <div class="layui-inline top_desc">-->
<!--                    <span class="weealipay">{$weealipay}￥</span>-->
<!--                    <div>支付宝收入</div>-->
<!--                </div>-->
                <div class="layui-inline top_desc">
                    <span class="weedelivery">{$weedelivery}￥</span>
                    <div>现金收入</div>
                </div>
<!--                <div class="layui-inline top_desc">-->
<!--                    <span class="weebalance">{$weebalance}￥</span>-->
<!--                    <div>会员余额</div>-->
<!--                </div>-->
            </div>
        </div>

        <div class="layui-inline layui-col-md10 top_title zxd_top">
            <div class="title">
                <span>本月收入明细</span>
            </div>

            <div>
                <div class="layui-inline top_desc">
                    <span class="monthgeneral">{$monthgeneral}￥</span>
                    <div>售票总收入</div>
                </div>
                <div class="layui-inline top_desc">
                    <span class="monthwechat">{$monthwechat}￥</span>
                    <div>微信收入</div>
                </div>
<!--                <div class="layui-inline top_desc">-->
<!--                    <span class="monthalipay">{$monthalipay}￥</span>-->
<!--                    <div>支付宝收入</div>-->
<!--                </div>-->
                <div class="layui-inline top_desc">
                    <span class="monthdelivery">{$monthdelivery}￥</span>
                    <div>现金收入</div>
                </div>
<!--                <div class="layui-inline top_desc">-->
<!--                    <span class="monthbalance">{$monthbalance}￥</span>-->
<!--                    <div>会员余额</div>-->
<!--                </div>-->
            </div>
        </div>


    </div>


    <div class="layui-inline layui-col-md12 top_title zxd_top">
        <div class="title">
            <span>销售曲线</span>
        </div>

        <div class="new_two_coent"  id="user" style="width:100%;height:500px;"></div>
    </div>


</div>


</body>
<script src="/static/js/index.js"></script>
<script src="/static/js/indextab.js"></script>
<script src="/static/js/pace.min.js"></script>
<script>

    //注册
    var user = echarts.init(document.getElementById('user'));
    const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
    user.setOption({
        backgroundColor: '#fff',
        title: {
            text: '销售统计',
            textStyle: {
                fontSize: 12,
                fontWeight: 400
            },
            left: 'center',
            top: '5%'
        },
        legend: {
            icon: 'circle',
            top: '5%',
            right: '5%',
            itemWidth: 6,
            itemGap: 20,
            textStyle: {
                color: '#556677'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                label: {
                    show: true,
                    backgroundColor: '#fff',
                    color: '#556677',
                    borderColor: 'rgba(0,0,0,0)',
                    shadowColor: 'rgba(0,0,0,0)',
                    shadowOffsetY: 0
                },
                lineStyle: {
                    width: 0
                }
            },
            backgroundColor: '#fff',
            textStyle: {
                color: '#5c6c7c'
            },
            padding: [10, 10],
            extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
            top: '15%'
        },
        xAxis: [{
            type: 'category',
            data: {$latelyValue},
            axisLine: {
                lineStyle: {
                    color: '#DCE2E8'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#556677'
                },
                // 默认x轴字体大小
                fontSize: 12,
                // margin:文字到x轴的距离
                margin: 15
            },
            axisPointer: {
                label: {
                    padding: [0, 0, 10, 0],
                    margin: 15,
                    // 移入时的字体大小
                    fontSize: 12,
                    backgroundColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#fff' // 0% 处的颜色
                        }, {
                            // offset: 0.9,
                            offset: 0.86,
                            /*
    0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）

                            */
                            color: '#fff' // 0% 处的颜色
                        }, {
                            offset: 0.86,
                            color: '#33c0cd' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#33c0cd' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
            boundaryGap: false
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#DCE2E8'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#556677'
                }
            },
            splitLine: {
                show: false
            }
        }, {
            type: 'value',
            position: 'right',
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#556677'
                },
                formatter: '{value}'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#DCE2E8'
                }
            },
            splitLine: {
                show: false
            }
        }],
        series: [{
            name: '总金额',
            type: 'line',
            data: {$latelyGeneral},
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: '#9E87FF'
                },
                    {
                        offset: 1,
                        color: '#9E87FF'
                    }
                ]),
                shadowColor: 'rgba(158,135,255, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20
            },
            itemStyle: {
                normal: {
                    color: colorList[0],
                    borderColor: colorList[0]
                }
            }
        }, {
            name: '微信收入',
            type: 'line',
            data: {$latelyWechat},
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
                width: 5,
                color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                    offset: 0,
                    color: '#73DDFF'
                },
                    {
                        offset: 1,
                        color: '#73DDFF'
                    }
                ]),
                shadowColor: 'rgba(115,221,255, 0.3)',
                shadowBlur: 10,
                shadowOffsetY: 20
            },
            itemStyle: {
                normal: {
                    color: colorList[1],
                    borderColor: colorList[1]
                }
            }
        },
            // {
            //     name: '会员余额',
            //     type: 'line',
            //     data: {$latelyBalance},
            //     symbolSize: 1,
            //     yAxisIndex: 1,
            //     symbol: 'circle',
            //     smooth: true,
            //     showSymbol: false,
            //     lineStyle: {
            //         width: 5,
            //         color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            //             offset: 0,
            //             color: '#fe9a'
            //         },
            //             {
            //                 offset: 1,
            //                 color: '#fe9a8b'
            //             }
            //         ]),
            //         shadowColor: 'rgba(254,154,139, 0.3)',
            //         shadowBlur: 10,
            //         shadowOffsetY: 20
            //     },
            //     itemStyle: {
            //         normal: {
            //             color: colorList[2],
            //             borderColor: colorList[2]
            //         }
            //     }
            // },
            {
                name: '现金收入',
                type: 'line',
                data: {$latelyDelivery},
                symbolSize: 1,
                yAxisIndex: 1,
                symbol: 'circle',
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    width: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#fe9a'
                    },
                        {
                            offset: 1,
                            color: '#F56948'
                        }
                    ]),
                    shadowColor: 'rgba(254,154,139, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                },
                itemStyle: {
                    normal: {
                        color: colorList[3],
                        borderColor: colorList[3]
                    }
                }
            },
            // {
            //     name: '支付宝收入',
            //     type: 'line',
            //     data: {$latelyAlipayt},
            //     symbolSize: 1,
            //     yAxisIndex: 1,
            //     symbol: 'circle',
            //     smooth: true,
            //     showSymbol: false,
            //     lineStyle: {
            //         width: 5,
            //         color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            //             offset: 0,
            //             color: '#fe9a'
            //         },
            //             {
            //                 offset: 1,
            //                 color: '#9E87FF'
            //             }
            //         ]),
            //         shadowColor: 'rgba(254,154,139, 0.3)',
            //         shadowBlur: 10,
            //         shadowOffsetY: 20
            //     },
            //     itemStyle: {
            //         normal: {
            //             color: colorList[4],
            //             borderColor: colorList[4]
            //         }
            //     }
            // }
        ]
    });

    //全选操作
    var modal = new yii.modal();

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //直接嵌套显示
        laydate.render({
            elem: '#test-n1'
            , position: 'static',
            done:function (value) {
                $.ajax({
                    url: "{:URL('tickets/finance/webClick')}",
                    type: 'POST',
                    data: {data: value},
                    dataType: 'json',
                    success: function (res) {
                        var data = res.data;
                        var weedata = res.weedata;
                        $(".alipay").html(data.alipay+"￥");
                        $(".balance").html(data.balance+"￥");
                        $(".delivery").html(data.delivery+"￥");
                        $(".general").html(data.general+"￥");
                        $(".wechat").html(data.wechat+"￥");
                        $(".weealipay").html(weedata.weealipay+"￥");
                        $(".weebalance").html(weedata.weebalance+"￥");
                        $(".weedelivery").html(weedata.weedelivery+"￥");
                        $(".weegeneral").html(weedata.weegeneral+"￥");
                        $(".weewechat").html(weedata.weewechat+"￥");
                        var monthdata = res.monthvalue;
                        $(".monthalipay").html(monthdata.monthalipay+"￥");
                        $(".monthbalance").html(monthdata.monthbalance+"￥");
                        $(".monthdelivery").html(monthdata.monthdelivery+"￥");
                        $(".monthgeneral").html(monthdata.monthgeneral+"￥");
                        $(".monthwechat").html(monthdata.monthwechat+"￥");
                        //month
                    }
                });
            }
        });


    });


</script>

</html>
